<template>

  <div class="main">

    <div style="width: 400px;margin: 150px auto">

      <el-card class="box-card">
        <div style="color: black;font-size: 30px;text-align: center">
          <p style="font-size: 40px;color: #409EFF">欢迎登录</p>

          <el-form ref="form" :rules="rules" :model="form" size="normal" style="padding: 30px">


            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-user-solid" placeholder="请输用户名" clearable
                        v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password v-model="form.password"></el-input>
            </el-form-item>

            <el-form-item prop="validCode">
              <div style="display: flex">
                <el-input prefix-icon="el-icon-key" placeholder="请输入验证码" style="width: 50%"
                          v-model="form.validCode"></el-input>
                <ValidCode @input="createValidCode"></ValidCode>
              </div>

            </el-form-item>


            <div style="justify-content: center;display: flex">

              <el-button style="width: 50%" @click="$router.replace('/register')">去注册</el-button>
              <el-button type="primary" style="width: 50%" @click="login">登录</el-button>

            </div>

          </el-form>
        </div>
      </el-card>


    </div>

  </div>

</template>

<script>
import request from "../unitls/request";
import ValidCode from "./ValidCode";//引入验证码功能

export default {
  name: "Login",
  components: {
    ValidCode
  },
  methods: {
    login() {

      //只有验证的规则正确才会发送请求
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let one = this.form.validCode.toUpperCase();
          let two = this.validCode.toUpperCase();
          if (one !== two) {
            this.$message.error("验证码错误")
            return;
          }
          request.post("/api/user/login", this.form).then(success => {
            if (success.code === '0') {
              this.$notify({
                title: '登录成功',
                message: success.data.username + '用户已登录',
                type: 'success'
              });

              sessionStorage.setItem("user", JSON.stringify(success.data)); //设置session，保存用户登录信息，转化为 JSON格式
              this.$router.replace('/');
            } else {
              this.$notify({
                title: '登录失败',
                message: '账号或密码错误',
                type: 'error'
              });
            }
          })


        } else {
          this.$notify({
            title: '格式不正确',
            message: '请检查您的输入',
            type: 'error'
          });
          return false;
        }
      });


    },
    createValidCode(data) {
      this.validCode = data;
    }
  },
  data() {
    return {
      form: {},
      validCode: '',
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur'}
        ],
        validCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 4, max: 4, message: '长度为 4 个字符', trigger: 'blur'}
        ],
      }
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100vh;
  /*background-color: skyblue;*/
  overflow: hidden;
}

</style>
